<template>
  <div class="bg" :style="curbg">
    <div
      style="
        width: 100%;
        height: 172px;
        display: flex;
        justify-content: space-between;
        padding: 0 130px;
        align-items: center;
      "
    >
      <div style="flex: 1">
        <img
          style="
            margin-right: 10px;
            background: rgb(255, 255, 255);
            width: 357px;
            padding: 5px 20px 5px 5px;
            border-radius: 10px;
          "
          src="@/assets/conference/logo.png"
        />
      </div>
      <div style="flex: 1; font-size: 38px; text-align: right; color: #333">
        {{ currentTime }}
      </div>
    </div>
    <div class="box">
      <div class="info-head">
        <div style="flex: 1">会议时间</div>
        <div v-if="isBig" style="flex: 1">会议室</div>
        <div style="flex: 1">会议主题</div>
        <div style="flex: 1">预约部门</div>
      </div>
      <div ref="content" class="content-box">
        <div class="warp"></div>
      </div>
    </div>
    <DialogForm
      ref="dialogForm"
      :visible="true"
      :closeButton="false"
      :closable="false"
      edit-model="E"
      :form="form"
      :forms.sync="form"
      confirmBtn="确定"
      header-title="选择会议室"
      :width="1000"
      :isEmit="false"
      :rules="rules"
      :form-list="formList"
      @confirm="submitForm"
      :styles="{ width: '650px' }"
    />
  </div>
</template>
<script>
import moment from 'moment'
import DialogForm from '@/components/DialogForm' // 弹窗
import { getAllBranchCompany } from '@/api/commons.js'
import { getMeetingRoomList } from '@/api/office/anualConference/index'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject.vue'
export default {
  data() {
    return {
      timeinterval: null,
      nowTime: new Date(),
      unitIdfetching: false,
      idfetching: false,
      spinning: false,
      unitData: [],
      roomData: [],
      contentHeight: 600,
      form: {
        unitId: undefined,
        id: undefined
      },
      rules: {
        unitId: [{ required: true, message: '请选择单位名称', trigger: 'change' }],
        id: [{ required: true, message: '请选择会议室名称', trigger: 'change' }]
      }
    }
  },
  components: {
    DialogForm
  },
  computed: {
    formList() {
      return [
        {
          type: SelectCompanyAndProject,
          keyName: 'unitId',
          label: '单位名称',
          span: 24,
          onSelectChange: this.getMeetingRoomList
        },
        {
          type: 'a-select',
          keyName: 'id',
          label: '会议室名称',
          span: 24,
          replaceFields: { value: 'id', label: 'name' },
          attrs: {
            loading: this.idfetching,
            labelInValue: !this.isBig,
            allowClear: true,
            mode: this.isBig ? 'multiple' : 'default'
          },
          data: this.roomData
        }
      ]
    },
    conHeight() {
      return this.contentHeight
    },
    currentTime() {
      return moment(this.nowTime).format('YYYY年MMMDo a h:mm:ss')
    },
    isBig() {
      return !!this.$route.query.type
    },
    isOnGoing() {
      return (start, end) => {
        let curDate = new Date(),
          beginDate = new Date(start),
          endDate = new Date(end)
        if (curDate >= beginDate && curDate <= endDate) {
          return true
        }
        return false
      }
    },
    curbg() {
      return {
        backgroundImage: 'url(' + require('@/assets/conference/conBg2.jpg') + ')',
        backgroundSize: 'cover',
        backgroundPosition: 'center center'
      }
      // this.isBig
      //   ? {
      //       backgroundImage: 'url(' + require('@/assets/conference/conBg2.jpg') + ')',
      //       backgroundSize: 'inherit',
      //       backgroundPosition: 'center center'
      //     }
      //   : {
      //       background: 'url(' + require('@/assets/conference/conBg1.jpg') + ')',
      //       backgroundPosition: 'center center',
      //       backgroundSize: 'inherit'
      //     }
    }
  },
  created() {
    this.timeinterval = setInterval(() => {
      // let icnow = new Date();
      this.nowTime = new Date() //this.$dateFormat(icnow, 'S')
    }, 1000)
  },
  methods: {
    // 获取分公司下的部门
    async getAllBranchCompany() {
      this.unitIdfetching = true
      const param = {
        tagCodes: ['BC']
      }
      let res = await getAllBranchCompany(param).catch(() => {
        this.unitIdfetching = false
      })
      this.unitIdfetching = false
      this.unitData = res.data || []
    },
    getMeetingRoomList(val) {
      this.roomData = []
      if (!val) return
      const param = {
        needCount: false,
        pageNo: 1,
        pageSize: 100,
        query: {
          enable: true,
          unitId: val.id || ''
        }
      }
      this.idfetching = true
      this.form.id = undefined
      getMeetingRoomList(param).then((res) => {
        this.idfetching = false
        if (res && res.code == 200) {
          this.roomData = res.data
        }
      })
    },
    submitForm() {
      const query = this.isBig
        ? {
            unitId: this.form.unitId,
            ids: this.form.id.join(',')
          }
        : {
            unitId: this.form.unitId,
            ids: this.form.id.key,
            name: this.form.id.label
          }
      this.$router.push({
        name: 'meetingRoomProjectionDetail',
        query: query
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timeinterval)
  }
}
</script>
<style lang="less" scoped>
.info-title {
  text-align: center;
  color: #fff;
  letter-spacing: 3px;
  font-size: 48px;
  font-weight: 500;
  height: 140px;
  line-height: 140px;
  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  // border-bottom: 1px solid #f2f2f2;
}
.info-head {
  display: flex;
  height: 152px;
  line-height: 152px;
  font-size: 38px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background-color: #315072;
  // border: 1px solid #f2f2f2;
  // border-bottom: 1px solid #f2f2f2;
  // border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.noData1 {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 80px;
  color: #fff;
  p {
    flex: 1;
  }
}
.noData2 {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 110px;
  color: rgb(255, 255, 255);
  justify-content: center;
  p {
    flex: 1;
    text-decoration: underline;
    text-underline-offset: 40px;
  }
}
.content-box {
  flex: 1;
  // border:1px solid #F2F2F2;
  overflow: hidden;
  position: relative;
  color: #fff;
  text-align: center;
  font-weight: 500;
}
.warp {
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.bg {
  // position: relative;
  // display: flex;
  // flex-flow: column;
  // justify-content: center;
  // align-items: center;
  height: var(--heightVh);
  width: var(--widthVw);
  font-size: 0;
  overflow: hidden;
  // background: url('~@/assets/conference/conBg1.png') center center;
  background-size: cover;
  .box {
    // background-image: radial-gradient(50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
    // background-image: radial-gradient(at 50% 150%,transparent 0,#000 100%);
    // background-image: radial-gradient(at 50% 50%, transparent 0, rgba(0, 0, 0, 0.4) 100%);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    width: 100%;
    height: calc(100% - 172px);
    // margin: 0px 1.25rem;
    // margin-top: 6rem;
    // padding: 1.25rem;
    position: relative;
    display: flex;
    flex-flow: column;
    h3 {
      font-family: PingFangSC-Semibold;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 0;
      // width: 1100px;
      // position: absolute;
      // left: 100px;
      // top: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 10px;
      margin-bottom: 0;
    }
  }
}
</style>